
<template>
<!-- 注意：better-scoll的scrollerHeight决定可滚动的区域，
但刚开始图片为加载完成，没有将图片高度计算进去，所以高度错误，加载图片后并没有更新高度 -->
<!-- 解决方法：监听每一张图片是否加载完成，只要有一张图片加载完成，执行一次刷新refresh() -->
<!-- 然而，要将图片加载和refresh结合，图片加载完成时，就刷新 -->
<!-- img.onload=function(){}原生监听，@load="imgload" -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
  name:'Scroll',
  data:function(){
    return {
      scroll:null,
    }
  },
  props:{
    isprobeType:{
      type:Number,
      //默认不监听
      default:0,
    },
    pullUpLoad:{
      type:Boolean,
      default:true,
    }
  },
 
  methods: {
    //回到顶部
    scrollToTop(x,y,time=300){
      this.scroll.scrollTo(x,y,time);
    },
    //上拉加载后手动调用完成加载
    finishPullUp(){
      this.scroll.finishPullUp();
    },
    //刷新检测高度
    refresh(){
     this.scroll && this.scroll.refresh && this.scroll.refresh();
      // console.log("刷新一次");
    },
    //记录滚动的y
    scrollY(){
      return this.scroll?this.scroll.y:0;
    }

  },
  mounted() {
    //此时不要用queryselector
    this.scroll=new Bscroll(this.$refs.wrapper,{
      observeDOM:true,
      click:true,
      //动态封装监听属性，由组件绑定
      probeType:this.isprobeType,
      //设置上拉加载更多属性
      pullUpLoad:this.pullUpLoad,
      
    });
    //监听滚动事件并将事件传输到home组件
    this.scroll.on('scroll',(position)=>{
        this.$emit("scrollcontent",position);
      });
    //监听上拉加载更多事件
    this.scroll.on("pullingUp",()=>{
      this.$emit("pullingUpContent")

    })

    
     
  },
}
</script>
<style scoped>
</style>